<template>
    <el-dialog title="详情" :visible.sync="dialogVisible" :close-on-click-modal="false" @open="btnDisabled=false"
               @close="handleClose"  >
        <el-form label-width="100px" :model="form" ref="form" :rules="rules" class="dlg-form"
                 label-position="right">
            <el-form-item label="角色编码:" prop="roleCode">
                <el-input v-model="form.roleCode" :disabled="disabled" />
            </el-form-item>
            <el-form-item label="角色名称:" prop="roleName">
                <el-input v-model="form.roleName" :disabled="disabled" />
            </el-form-item>
            <el-form-item label="所属系统:" prop="sysCode">
                <sys-select v-model="form.sysCode" :disabled="disabled"/>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <template v-if="disabled">
                <el-button @click="dialogVisible = false">关闭</el-button>
            </template>
            <template v-else>
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit('form')" :disabled="btnDisabled">确 定</el-button>
            </template>
        </div>
    </el-dialog>
</template>
<script>
    import SysSelect from '../../../components/sys/SysSelect'

  export default {
    components: {
        SysSelect
    },
    name: 'role-dialog',
    props: {
      pk: {
        type: String,
        required: true
      },
      value: {
        type: Boolean,
        required: true
      },
      disabled:{
        type: Boolean,
        required: true
      }
    },
    watch: {
      value: function () {
        this.dialogVisible = this.value
        if (this.pk) {//修改
          this.form={
            roleId:this.pk
          }
          this.getData('')
        }else {//新增
          this.handleNew()
        }
      }
    },
    created () {
      console.log('created');
      this.dialogVisible = false
    },
    data () {
      return {
        dialogVisible: false,
        btnDisabled: false,
        data: [],
        form: {
        },
        rules: {
          roleName: [
            {required: true, message: '请输入名称', trigger: 'blur'},
            {max: 30, message: '长度不能超过30个字符', trigger: 'blur'}
          ],
          roleCode: [
            {required: true, message: '请输入角色编码', trigger: 'blur'},
            {max: 32, message: '长度不能超过32个字符', trigger: 'blur'}
          ],
          sysCode: [
            {required: true, message: '请选择所属系统', trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      getData () {
        let self = this
        self.$axios
          .post('roleAction/findById', {
            id: self.form.roleId
          })
          .then(function (res) {
            self.form = res.data
          })
      },
      handleClose (value) {
        this.$emit('input', this.dialogVisible)
        this.$emit('close')
      },
      handleSubmit (formName) {
        let self = this
        self.btnDisabled = true
        self.$refs[formName].validate((valid) => {
          if (valid) {
            self.$axios
              .post('roleAction/saveForm', self.form)
              .then(function (res) {
                if (res.data.result) {
                  self.$message({
                    message: '保存成功',
                    type: 'success'
                  })
                  self.dialogVisible = false
                } else {
                  self.btnDisabled = false
                  self.$message.error(res.data.msg)
                }
              })
          } else {
            console.log('error submit!!')
            self.btnDisabled = false
            return false
          }
        })
      },
      handleNew () {
        let self = this
        self.$axios
            .post('commonRest/getNewId')
            .then((res) => {
                self.form = {
                    roleId: 'new' + res.data
                }
            })
      },
    }
  }
</script>
